import React from 'react'
import { getCplist } from '../../api/use'
import { useLoaderData, useNavigate } from 'react-router-dom'
import { NavBar } from 'antd-mobile'
import { Form, Input, Button } from 'antd-mobile'
import { AddCircleOutline } from 'antd-mobile-icons'
import { Popover } from 'antd-mobile'

const Index = () => {
    const nav = useNavigate()
    const lo = useLoaderData()
    const onFinish = (values) => {
        console.log(values)
    }
    return (
        <div>
            <NavBar onBack={() => nav(-1)}>选择乘车人</NavBar>
            <div style={{ textAlign: 'center', fontSize: '20px' }}>
                <p>
                    <span style={{ marginLeft: '10px' }}>{lo.info.startTime}</span>

                    <span style={{ marginLeft: '20px' }}>{lo.info.trainNo}</span>

                    <span style={{ marginLeft: '20px' }}>{lo.info.endTime}</span>
                </p>

                <span style={{ marginLeft: '10px' }}>{lo.info.endStation}</span>
                <span style={{ marginLeft: '20px' }}>{lo.info.timeTaken}</span>
                <span style={{ marginLeft: '20px' }}   >{lo.info.endTime}</span>
            </div>
            <div>
                <Form
                    onFinish={onFinish}
                    initialValues={{
                        contacts: [{}],
                    }}
                    footer={
                        <Button block type='submit' color='primary' size='large'>
                            提交
                        </Button>
                    }
                    mode='card'
                >
                    <Form.Array
                        name='contacts'
                        onAdd={operation => operation.add({ name: '张三' })}
                        renderAdd={() => (
                            <span>
                                <AddCircleOutline /> 添加
                            </span>
                        )}
                        renderHeader={({ index }, { remove }) => (
                            <>
                                <span>联系人{index + 1}</span>
                                <a onClick={() => remove(index)} style={{ float: 'right' }}>
                                    删除
                                </a>
                            </>
                        )}
                    >
                        {fields =>
                            fields.map(({ index }) => (
                                <>
                                    <Form.Item
                                        name={[index, 'name']}
                                        label='姓名'
                                        rules={[{ required: true, message: '姓名不能为空' }]}
                                    >
                                        <Input placeholder='请输入姓名' />
                                    </Form.Item>
                                    <Form.Item name={[index, 'address']} label='身份证号'>
                                        <Input placeholder='请输入身份证号' />
                                    </Form.Item>
                                </>
                            ))
                        }
                    </Form.Array>
                </Form>
            </div>
        </div>
    )
}

export default Index
export const loader = async ({ request }) => {
    const url = new URL(request.url)
    const spp = Object.fromEntries(url.searchParams)
    console.log(spp);

    const { data: res } = await getCplist({
        start: spp.start,
        end: spp.end,
        id: spp.id
    })
    console.log(res);

    return {
        info: res
    }
}

